You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -60,7 +61,7 @@ Before reading on, copy this code to a new text file, and save it in your workin
60
61
A renderer is a tool that displays scenes right in your browser. There are a few different renderers: WebGL is the default one, and the others you can use are Canvas, SVG, CSS and DOM. They differ in a way everything is rendered, so the WebGL implementation will work differently than the CSS one, but the idea is to have it look exactly the same for the end user. Thanks to this approach, a fallback can be used if the primary technology is not supported by the browser.
61
62
62
63
```js
63
-
var renderer =newTHREE.WebGLRenderer({ antialias:true });
@@ -75,7 +76,7 @@ Add this code into the second {{htmlelement("script")}} element, just below the
75
76
A scene is the place where everything happens. When creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. In three.js, the scene is reperesented by a `Scene` object. Let's create it, by adding the following line below our previous lines:
76
77
77
78
```js
78
-
var scene =newTHREE.Scene();
79
+
constscene=newTHREE.Scene();
79
80
```
80
81
81
82
Later on we will be using the `.add()` method to add objects to the scene.
@@ -85,7 +86,7 @@ Later on we will be using the `.add()` method to add objects to the scene.
@@ -124,7 +125,7 @@ Again add the new code below your previous additions, then try saving the file a
124
125
Now the scene is properly rendering we can start adding 3D shapes to it. To speed up development Three.js provides a bunch of predefined primitives that you can to create shapes instantly in a single line of code. There's cubes, spheres, cylinders and more complicated shapes available. Drawing the needed vertices and faces for given shape is taken care of by the framework, so we can focus on the high level coding. Let's start by defining the geometry for a cube shape — add the following just above the `render()` function:
125
126
126
127
```js
127
-
var boxGeometry =newTHREE.BoxGeometry(10, 10, 10);
In this case we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though — we also need a material that will be used for our shape.
@@ -134,7 +135,7 @@ In this case we define a simple cube that is 10 x 10 x 10 units. The geometry it
134
135
Material is that thing covering the object — the colors or texture on its surface. In our case we will use a simple blue color to paint our box. There are predefined materials that can be used: Basic, Phong, Lambert. We will play with the last two later on, but for now the Basic one should be enough:
135
136
136
137
```js
137
-
var basicMaterial =newTHREE.MeshBasicMaterial({ color:0x0095dd });
@@ -159,21 +160,54 @@ We've now created the actual cube using the geometry and material defined earlie
159
160
scene.add(cube);
160
161
```
161
162
162
-
If you save and refresh now, your object will look like a square, because it's facing the camera. The good thing about objects is that we can move them on the scene however we want, for example rotating and scaling as we like. Let's apply a little bit of rotation to the cube, so we can see more than one face — again, add below the previous one:
163
+
## Three.js 形状演示
163
164
164
-
```js
165
-
cube.rotation.set(0.4, 0.2, 0);
165
+
如果你到目前为止按照所有步骤操作没有遇到任何问题，那么你已经使用 Three.js 在 3D 环境中创建了第一个对象！这比你想象的要简单，对吧？你的代码应该类似于下面的运行实例。你可以点击“Play”以在 MDN 代码演练场中查看和编辑代码：
Now onto the shapes and materials: what would you say for a torus using the Phong material? Try adding the following lines just below the lines that define the cube.
187
221
188
222
```js
189
-
var torusGeometry =newTHREE.TorusGeometry(7, 1, 6, 12);
190
-
var phongMaterial =newTHREE.MeshPhongMaterial({ color:0xff9500 });
191
-
var torus =newTHREE.Mesh(torusGeometry, phongMaterial);
@@ -213,15 +248,13 @@ As mentioned above, the new objects currently just look black. To have both the
213
248
There are various types of light sources available in Three.js; the most basic one is the `PointLight`, which works like a flashlight — shinig a spotlight in a given direction. Add the following below your shapre definitions:
214
249
215
250
```js
216
-
var light =newTHREE.PointLight(0xffffff);
251
+
constlight=newTHREE.PointLight(0xffffff);
217
252
light.position.set(-10, 15, 50);
218
253
scene.add(light);
219
254
```
220
255
221
256
We define a white point of light, set it's position a bit away from the center of the scene so it can light up some parts of the shapes, and add it to the scene. Now everything works as it should — all three shapes are visible. You should check the documentation for other types of light like Ambient, Directional, Hemisphere or Spot, and experiment with placing them on the scene to see the effects.
222
257
223
-
224
-
225
258
This looks a little bit boring though. In a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them.
226
259
227
260
## Animation
@@ -243,7 +276,7 @@ It will rotate the cube on every frame by a tiny bit, so it will look like a smo
243
276
We can also scale a given object. By applying a constant value we could make it grow or shrink once, but let's make it more interesting. First, we will need a helper variable called `t` for counting the elapsed time. Add it right before the `render()` function:
244
277
245
278
```js
246
-
var t =0;
279
+
let t =0;
247
280
```
248
281
249
282
Now let's increase the value by a given constant value on each frame of the animation; add the following lines just below the `requestAnimationFrame()` invocation:
0 commit comments